<template>
  <el-table :data="friends" style="width: 100%;height:80vh;font-size: 20px">
    <el-table-column prop="avatarUrl" label="头像" min-width="30">
      <template #default="{ row }">
        <img :src="row.avatarUrl" alt="" class="user-avatar" />
      </template>
    </el-table-column>
    <el-table-column prop="username" label="用户名" min-width="40"/>
    <el-table-column prop="gameStatus" label="状态" min-width="40">
      <template v-slot="scope">
        <span :class="getStatusClass(scope.row.gameStatus)">
          {{ scope.row.gameStatus }}
        </span>
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" min-width="30">
      <template #default="{ row }">
        <el-button
            :type="row.cooldown ? 'info' : 'success'"
            :disabled="row.cooldown"
            :style="{ backgroundColor: row.cooldown ? '#d3d3d3' : '' }"
            @click.prevent="inviteFriend(row)"
            round
        >
          {{ row.cooldown ? row.remainingTime : '邀请' }}
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import {onMounted, ref, watch} from "vue";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";

export default {
  setup() {
    const store = useStore();

    const friends = ref([]);

    // Initialize friends with cooldown properties
    const initializeFriends = (friendsList) => {
      return friendsList.map(friend => ({
        ...friend,
        cooldown: false,
        remainingTime: 5 // Initial cooldown time in seconds
      }));
    };

    const getStatusClass = (status) => {
      switch (status) {
        case '在线':
          return 'status-online';
        case '游戏中':
          return 'status-gaming';
        case '组队中':
          return 'status-teaming';
        case '离线':
          return 'status-offline';
        default:
          return '';
      }
    };
    const updateFriends = () => {
      friends.value = initializeFriends(store.state.user.friends);
    }

    const getFriendRequest = (send) => {
      store.dispatch("getFriends", {
        success(resp) {
          //这里会自动更新好友状态
          if (send) ElMessage.success(resp);
        },
        error(resp) {
          ElMessage.error(resp);
        }
      });
    };
    updateFriends();
    watch(
        () => store.state.user.friends,
        (newFriends) => {
          if (newFriends) {
            updateFriends(); // 当 socket 更新后，调用 connectMessage
          }
        }
    );

    const inviteFriend = (friend) => {
      store.dispatch("inviteFriend", {
        token: store.state.user.token,
        receiverId: friend.userId,
        success(resp) {
          ElMessage.success(resp);

          // Start cooldown process
          startCooldown(friend);
        },
        error(resp) {
          getFriendRequest(false);
          ElMessage.error(resp);
        }
      });
    };

    const startCooldown = (friend) => {
      friend.cooldown = true;

      // Countdown logic
      const interval = setInterval(() => {
        if (friend.remainingTime > 0) {
          friend.remainingTime--;
        } else {
          clearInterval(interval);
          friend.cooldown = false;
          friend.remainingTime = 5; // Reset to initial value for next use
        }
      }, 1000);
    };

    onMounted(() => {
      getFriendRequest(false);
    });

    return {
      friends,
      getFriendRequest,
      inviteFriend,
      getStatusClass,
      updateFriends
    };
  },
};
</script>

<style scoped>
.friend-list {
  background-color: white;
  border: 6px solid #ccc;
  padding: 10px;
  height: 60vh; /* 固定高度 */
  width: 100%;
  overflow-y: auto; /* 超出部分显示滚动条 */
}

.friend-list ul {
  list-style-type: none;
  padding: 0; /* 移除默认内边距 */
}

.friend-list li {
  display: flex;
  align-items: center;
  padding: 5px; /* 添加内边距使点击区域更大 */
}

.friend-list li:hover {
  background-color: #f0f0f0; /* 鼠标悬停效果 */
}

.friend-list img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.user-avatar{
  width: 30%;
}


.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}


.status-online {
  /*background-color: rgba(39,210,15,0.41);*/
  color: green;
}
.status-gaming {
  /*background-color: rgba(255, 165, 0, 0.4);*/
  color: orange;
}
.status-teaming {
  /*background-color: rgba(0, 0, 255, 0.4);*/
  color: blue;
}
.status-offline {
  /*background-color: rgba(128, 128, 128, 0.4);*/
  color: gray;
}

</style>
